<template>
	<view>
		<MyCustomNav bgColor='#3BB6DC' title='老板看账'>
		</MyCustomNav>

		<view class="order-index" ref="container">
			<view class="popupn">
				<view class="title line1" @click="changeStoreList">
					<image class="mer_logo" :src="storeInfo.mer_avatar" mode=""></image>
					{{storeInfo.mer_name}}
					<text v-if="!downStatus" class="iconfont icon-xiala1 spin"></text>
					<text v-else class="iconfont icon-xiala1"></text>
				</view>
			</view>
		</view>
		<shopList ref="shopList" @changeStoreClose="changeStoreClose" @getStoreInfo="getStoreInfo" :id='mer_id'></shopList>

		<view class="summary lay-c-c-col white pd-t-xxl">
			<view class="hspace-xxl" style="height: 80rpx;"></view>
			<view class="text-sm pd-b-md">今日总盈利</view>
			<view class="text-xxxl pd-md text-bold">{{today_profit}}</view>
			<view class="lay-c-c pd-lg" style="width:100%">
				<view class="lay-c-c-col flex1">
					<view class="text-sm pd-md">收入</view>
					<view class="text-xl">{{today_income}}</view>
				</view>
				<view class="lay-c-c-col flex1" style="border-left: 0.5px solid rgba(255,255,255,0.3)">
					<view class="text-sm pd-md">回鱼</view>
					<view class="text-xl">{{today_retfsh}}</view>
				</view>
			</view>
		</view>


		<view class="mg-t-lg">
			<view class="lay-c-c solid-bottom line-little-gray">
				<view class="lay-c-c-col pd-xl flex1" @click="goDayOrders">
					<image class="logo" src="https://mer.chuidiaotop.com/static/images/shou_kuan_ji_lu.png"></image>
					<view class="pd-t-md">收款记录</view>
				</view>
				<view class="lay-c-c-col pd-xl solid-left line-little-gray flex1" @click="goCashAccount">
					<image class="logo" src="https://mer.chuidiaotop.com/static/images/xian_jin_zhang_hu.png"></image>
					<view class="pd-t-md">现金账户</view>
				</view>
				<view class="lay-c-c-col pd-xl solid-left line-little-gray flex1" @click="goGuaranteeAccount">
					<image class="logo" src="https://mer.chuidiaotop.com/static/images/bao_zheng_jin.png"></image>
					<view class="pd-t-md">保证金账户</view>
				</view>
			</view>
			<view class="lay-c-c solid-bottom line-little-gray">
				<view class="lay-c-c-col pd-xl flex1">
					<image class="logo" src="https://mer.chuidiaotop.com/static/images/yuan_gong_guan_li.png"></image>
					<view class="pd-t-md">员工管理</view>
				</view>
				<view class="lay-c-c-col pd-xl solid-left line-little-gray flex1">
					<image class="logo" src="https://mer.chuidiaotop.com/static/images/shang_jia_fu_li.png"></image>
					<view class="pd-t-md">商家福利</view>
				</view>
				<view class="lay-c-c-col pd-xl solid-left line-little-gray flex1">
					<image class="logo" src="https://mer.chuidiaotop.com/static/images/feng_xian.png"></image>
					<view class="pd-t-md">风险管理</view>
				</view>
			</view>
		</view>

		<view class="customer-service lay-c-c text-md darkblue">
			<view>{{service_phone}}</view>
		</view>
	</view>
</template>

<script>
	// +----------------------------------------------------------------------
	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
	// +----------------------------------------------------------------------
	// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
	// +----------------------------------------------------------------------
	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
	// +----------------------------------------------------------------------
	// | Author: CRMEB Team <admin@crmeb.com>
	// +----------------------------------------------------------------------
	import {
		getMerBossData,
		merExtractApply
	} from "@/api/fsh.js";

	import {
		rechargeWechat
	} from '@/api/user.js';

	import shopList from '@/components/shopList';

	import MyCustomNav from '../components/my/MyCustomNav.vue';
	
	export default {
		name: 'bossData',
		components: {
			shopList,
			MyCustomNav
		},
		data() {
			return {
				storeInfo: {
					mer_name: 'mi',
					image: 'https://thirdwx.qlogo.cn/mmopen/vi_32/vD4bYlSpNrEJl85ia8gsgaSUUYa0vyxL7icEsl9DeWUiafcsG87icBNNpdSmibMeDjPYXxpal1jdlSvksnXEr80quQQ/132'
				},
				downStatus: false,
				
				
				today_income: '',
				today_retfsh: '',
				today_profit: '',
				service_phone: '',
			}
		},
		onLoad() {
			this.getStoreList();
		},
		methods: {			
			getMerBossData: function(merId) {
				getMerBossData(merId).then(res=>{
					console.log(`getMerBossData, res:`, res)
					this.today_income = res.entity.today_income;
					this.today_retfsh = res.entity.today_retfsh;
					this.today_profit = res.entity.today_profit;
					this.service_phone = res.entity.service_phone;
				}).catch(err=>{
					console.error("getMerBossData fail:", err)
					// if(err.msg.indexOf("没有权限") > 0) {
					// 	uni.showToast({
					// 		title: "没有权限",
					// 		icon: "fail",
					// 		duration: 1200,
					// 		complete: ()=> { 
					// 			uni.navigateBack({})
					// 		}
					// 	})
					// }
				})
			},
			
			goDayOrders() {
				uni.navigateTo({
					url: `./day_orders?merId=${this.mer_id}`
				})
			},
			
			goCashAccount() {
				uni.navigateTo({
					url: `./cash_account?merId=${this.mer_id}`
				})
			},
			
			goGuaranteeAccount() {
				uni.navigateTo({
					url: `./guarantee_account?merId=${this.mer_id}`
				})
			},

			getStoreList: function() {
			  this.$nextTick(() => {
			    this.$refs.shopList.getStoreList({ customer: 1 })
			  });
			},
			changeStoreClose: function() {
			  this.downStatus = false;
			},
			changeStoreList: function(data) {
			  this.downStatus = !this.downStatus;
			  this.$refs.shopList.isShowStore();
			
			},
			getStoreInfo: function(data) {
			  let that = this;
			  that.loaded = false;
			  that.where = { page: 1, limit: 15 }
			  that.list = [];
			  that.storeInfo = data;
			  that.mer_id = data.mer_id
			  //that.getOrderStatistics(data.mer_id);
			  //that.getList(data.mer_id)
			  that.getMerBossData(data.mer_id)
			},
		}
	}
</script>

<style lang="scss">
	@import "@/leui.scss";

	.summary {
		background-color: #3BB6DC;
		height: 500rpx;
	}

	.customer-service {
		position: fixed;
		width: 100%;
		height: 80rpx;
		bottom: 0px;
		background-color: #eeeeee;
	}

	.popupn {
		position: fixed;
		width: 100%;
		text-align: center;
		top: 140rpx;
		left: 0;
		background: transparent;
		height: 90rpx;
		line-height: 90rpx;
		z-index: 100;

		.spin {
			display: block;
			transform: rotate(180deg);
			font-size: 36rpx;
		}

		.title {
			max-width: 560rpx;
			margin: 0 auto;
			position: relative;
			display: inline;
			padding: 10rpx 30rpx 10rpx 50rpx;
			background-color: rgba(0, 0, 0, 0.15);
			border-radius: 30rpx;
			color: #fff;
		}

		.iconfont {
			display: inline-block;
			position: relative;
			top: 4rpx;
			right: 0;
		}

		.mer_logo {
			width: 34rpx;
			height: 34rpx;
			position: relative;
			top: 6rpx;
			right: 10px;
		}

		.mer_name {
			display: inline-block;
			max-width: 650rpx;
		}

		.invoice-content {
			background-color: #ffffff;
		}
	}

	.order-index .wrapper {
		width: 690upx;
		background-color: #fff;
		border-radius: 10upx;
		margin: 0upx auto 0 auto;
		padding-top: 25upx;
	}

	.order-index .wrapper .title {
		font-size: 30upx;
		color: #282828;
		padding: 0 30upx;
		margin-bottom: 40upx;
	}

	.order-index .wrapper .title .iconfont {
		color: #2291f8;
		font-size: 40upx;
		margin-right: 13upx;
		vertical-align: middle;
	}

	.order-index .wrapper .list .item {
		width: 33.33%;
		text-align: center;
		font-size: 24upx;
		color: #999;
		margin-bottom: 45upx;
	}

	.order-index .wrapper .list .item .num {
		font-size: 40upx;
		color: #333;
	}
</style>
